<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import useListStore from '@/store/listStore'

import cookbook from '@/assets/images/cookbook.png'
import cookbookActive from '@/assets/images/cookbook-active.png'

import menu from '@/assets/images/menu.png'
import menuActive from '@/assets/images/menu-active.png'

import more from '@/assets/images/more.png'
import moreActive from '@/assets/images/more-active.png'
import { getDishes } from './api/listApi'
const active = ref(0)
const title = ref('菜谱大全')

const route = useRoute()

watch(
  () => route.meta,
  meta => {
    title.value = meta.title
  }
)

const listStore = useListStore()

onMounted(async () => {
  listStore.loadData()
})
</script>

<template>
  <div class="index-container">
    <van-nav-bar :title="title" :safe-area-inset-top="true">
    </van-nav-bar>
    <main>
      <router-view></router-view>
    </main>
    <van-tabbar v-model="active" active-color="#000" inactive-color="#ccc" route :fixed="true">
      <van-tabbar-item to="/cookbook">
        <span>菜谱大全</span>
        <template #icon="props">
          <img :src="props.active ? cookbookActive : cookbook" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/category">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active ? menuActive : menu" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/more">
        <span>更多</span>
        <template #icon="props">
          <img :src="props.active ? moreActive : more" alt="">
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="scss">
.index-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  overflow-y: scroll;
  padding-bottom: 50px;
}
.van-nav-bar__title {
  color: #fff;
}

.van-nav-bar__content {
  background-color: #ee7530;
}

.index-container {
  height: 100vh; /* 使用视口高度 */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 禁止外层容器滚动 */
}

main {
  flex: 1;
  overflow-y: auto; /* 允许内容滚动 */
  padding-bottom: 50px;
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;  /* Firefox */
  
  /* Chrome/Safari */
  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

</style>
